<template>
    <div class="xiangqing">
        <nav-bar tittle="电影" isBack="true" class="bar"></nav-bar>
        <div class="head">
            <img :src="imgs" alt="" class="pic1">
            <section>
                <h1>{{ mingzi }}</h1>
                <h3>{{ yingwenmingzi }}</h3>
                <div>{{ genres }}</div>
                <span>{{ countries }}{{ durations }}</span>
                <div class="one">
                    <p>♥想看</p>
                    <p>⭐看过</p>
                </div>
            </section>
        
        </div>
        <div class="two">
                    <div class="three">
                        <p class="five">IMDB评分</p>
                        <p class="four">8.0</p>
                        <p class="five">15.4w人评</p>
                    </div>
                    <div class="three">
                        <p class="five">慕影评分</p>
                        <p class="four">9.2</p>
                        <p class="five">0人评</p>
                    </div>
                    <div class="three">
                        <p class="five">豆瓣评分</p>
                        <p class="four">9.2</p>
                        <p class="five">81.1w人评</p>
                    </div>
                </div>
  <div class="six">
    <p>宫崎骏</p>
    <p>动画</p>
    <p>天空之城</p>
    <p>日本</p>
    <p>动漫</p>
  </div>
  <div class="seven">
    <p>宫崎骏</p>
    <p>日本动画</p>
    <p>经典</p>
  </div>
  <div class="at">
  <p class="play">剧情</p>
  <a>></a>
  </div>
<div class="lol">{{ summary }}</div>
<div class="at">
  <p class="play">演员</p>
  <a>全部41></a>
  </div>
  <van-swipe :loop="false" :width="150" :show-indicators="false">
    <van-swipe-item ><img src="https://img.ixook.com/actor/FveeLc6cuMIqudOKUL4uppG_gRkS@public "><p class="nine">宫崎骏</p><P class="ten">导演</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/image/default.jpg@public "><p class="nine">Susan Hickman</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/actor/Fn5Cb_m9r5Nj4zaBG1UiE1gwDoT2@public"><p class="nine">特蕾丝·麦克尼尔</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/actor/FkZkwBUB5SHmTzK3zXMqTsi3cv-3@public "><p class="nine">田中真弓</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/actor/FmAaYwMBRoi_1X6AeK4OtJyoK6Vx@public "><p class="nine">横泽启子</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/actor/FkFcNQ9VrUAruOjUoLaro_6FFBR6@public"><p class="nine">初井言荣</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/actor/FtzrOshBOkSvQGeNBPHkkrhZmijl@public"><p class="nine">寺田农</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/actor/FpgFxt3nNQm5b7f4HEBK2_fs--P2@public "><p class="nine">常田富士男</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/actor/Ft__XM9nWL0OCakGxN7g4hUhN1iq@public "><p class="nine">永井一郎</p><P class="ten">演员</P></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/actor/FkppWkjR1LwJuHxQi0BNwbiE7on6@public "><p class="nine">糸博</p><P class="ten">演员</P></van-swipe-item>
</van-swipe>
<div class="at">
  <p class="play">相册</p>
  <a>全部1></a>
  </div> 
  <img src="https://img.ixook.com/movie/Fnu0fQms8rWzw8G6iQ10x7DPq-Kf@public" alt="" class="space">
  <div class="at">
  <p class="play">相似电影</p>
  </div>
  <van-swipe :loop="false" :width="150" :show-indicators="false">
    <van-swipe-item ><img src="https://img.ixook.com/movie/FjjCCCFCtYBpJmWDwIF4IaCZLzee@public "><p class="look">千与千寻</p></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/movie/FnUfAk-jrMy32HB2qLoEobwO266o@public"><p class="look">龙猫</p></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/movie/lpZreZSLfdJd1W2Y6eHg-spZLPaa@public "><p class="look">哈尔的移动城堡</p></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/movie/FuQuuuzw1--O6PElokGNKZwc-vhg@public "><p class="look">幽灵公主</p></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/movie/FrOW6mRcpNqabNgGlX0WAeWogqnQ@public"><p class="look">大闹天宫</p></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/movie/FifeW497XUayUwmrgNiTEwVKc5ze@public"><p class="look">风之谷</p></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/movie/FlI_RtqRr_Fr_L23BmzMte98ESKc@public"><p class="look">哪吒闹海</p></van-swipe-item>
    <van-swipe-item ><img src="https://img.ixook.com/movie/FrnSwUVHBB_4X_u5jgtuQJjq8Z6C@public "><p class="look">猫的报恩</p></van-swipe-item>
    <van-swipe-item ><img src=" https://img.ixook.com/movie/Fvo-1VHcfeSEdJU-6X_PRMYrNp9U@public"><p class="look">红猪</p></van-swipe-item>
   
</van-swipe>
    </div>
</template>
<script>
// import axios from 'axios'
// let goodid = this.$route.query.id
// axios.get(`https://test-h5-api.ixook.com/movie/topid=${goodid}`).then(res => {
//     console.log(res);
// })
import axios from 'axios'
export default {
    data() {
        return {
            imgs: [],
            mingzi: [],
            yingwenmingzi: [],
            genres: [],
            countries: [],
            durations: [],
            pubdate: [],
            summary:[],
            cast:[],
            



        }
    },


    created() {
        let goodid = this.$route.query.id
        console.log(goodid);
        axios.get(`https://test-h5-api.ixook.com/movies/${goodid}`).then(res => {
            console.log(res);
            this.imgs = res.data.data.poster.small
            this.mingzi = res.data.data.akas[4]
            this.yingwenmingzi = res.data.data.title_original
            this.genres = res.data.data.genres
            this.countries = res.data.data.countries
            this.durations = res.data.data.durations
            this.pubdate = res.data.data.pubdate
            this.summary = res.data.data.summary
            this.cast = res.data.data.cast
            console.log(this.countries);
            console.log(this.genres);
            console.log(this.yingwenmingzi);
            console.log(this.mingzi);
            console.log(this.countries);
            console.log(this.durations);
            console.log(this.pubdate);
            console.log(this.summary);
            console.log(this.cast);
           
            
        })
    }
}
</script>
<style lang="scss" scoped>
.xiangqing{
    height:113%;
    background-color: #3a7e86;
}
.bar {
    background-color: #735d4d;
}

.pic1 {
    width: 96px;
    height: 134px;
}

.head {
    width: 375px;
    height: 156px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;

    section {
        // padding: 10px;
        margin-left: 10px;
        width:250px;
    }
}
.one{
    display:flex;
    justify-content: space-between;
    text-align: center;
    line-height: 50px;
    p{
        width:100px;
        height:50px;
        background-color:#295d63;
        margin-top: 18px;
        color:white;
    }
}
.two{
    width:100%;
    height:90px;
    display:flex;
    justify-content:space-around;
    line-height: 30px;
 .three{
    background-color:#295d63 ;
    .five{
        color:white;
       
    }
 }
 .four{
    color:yellow;
    text-align: center;
 }
}
.six{
    display:flex;
    justify-content: space-around;
    margin-top: 5px;
    p{
        width:70px;
        height:30px;
        background-color: #45868d;
        border-radius: 20px;
        text-align: center;
        color:white;
        line-height: 30px;
    }
}
.seven{
    display:flex;
    justify-content: space-between;
    margin-top: 5px;
    p{
        width:70px;
        height:30px;
        background-color: #45868d;
        border-radius: 20px;
        text-align: center;
        color:white;
        line-height: 30px;
    }
}
.at{
    display:flex;
    justify-content: space-between;
    .play{
    height:30px;
    color:white;
   
   line-height: 30px;
}
a{
    line-height: 30px;
    color:white;
}
}
.lol{
    width:100%;
    color:white;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp: 4;
    text-overflow: ellipsis;
    overflow: hidden;
}
.nine{
    color:white;
    text-align: center;
    
}
.ten{
    
    color:white;
    text-align: center;
   
    
    
}
.space{
    width:80px;
    height:100px;
}
.look{
    color:black;
    text-align: center;
}



</style>